<template>
  <view class="register-container">
    <!-- 顶部背景区域 -->
    <view class="bg-area">
      <image class="bg-image" src="/static/images/agriculture-bg.png" mode="aspectFill"></image>
      <view class="overlay"></view>
      <view class="platform-info">
        <image class="logo" src="/static/images/logo.png" mode="aspectFit"></image>
        <text class="platform-name">智慧农业环境监测平台</text>
        <text class="platform-slogan">科技赋能农业 · 数据驱动未来</text>
      </view>
    </view>

    <!-- 注册表单区域 -->
    <view class="form-card">
      <view class="form-header">
        <text class="form-title">账号注册</text>
        <text class="form-subtitle">创建您的账号，开启智慧农业之旅</text>
      </view>

      <view class="form-body">
        <!-- 用户名输入框 -->
        <view class="input-group">
          <text class="input-label">用户名</text>
          <view class="input-wrapper" :class="{ 'input-focus': usernameFocus }">
            <image class="icon" src="/static/login/icons8-用户-50.png" mode="aspectFit"></image>
            <input
              class="input"
              type="text"
              v-model="registerForm.username"
              placeholder="请输入用户名"
              @focus="usernameFocus = true"
              @blur="usernameFocus = false"
            />
          </view>
        </view>

        <!-- 密码输入框 -->
        <view class="input-group">
          <text class="input-label">密码</text>
          <view class="input-wrapper" :class="{ 'input-focus': passwordFocus }">
            <image class="icon" src="/static/login/icons8-密码-30.png" mode="aspectFit"></image>
            <input
              class="input"
              :type="showPassword ? 'text' : 'password'"
              v-model="registerForm.password"
              placeholder="请输入密码"
              @focus="passwordFocus = true"
              @blur="passwordFocus = false"
            />
            <image 
              class="password-icon" 
              :src="showPassword ? '/static/login/显示密码.png' : '/static/login/不显示密码.png'"
              @tap="togglePasswordVisibility"
            ></image>
          </view>
        </view>

        <!-- 确认密码输入框 -->
        <view class="input-group">
          <text class="input-label">确认密码</text>
          <view class="input-wrapper" :class="{ 'input-focus': confirmPasswordFocus }">
            <image class="icon" src="/static/login/icons8-密码-30.png" mode="aspectFit"></image>
            <input
              class="input"
              :type="showConfirmPassword ? 'text' : 'password'"
              v-model="registerForm.confirmPassword"
              placeholder="请再次输入密码"
              @focus="confirmPasswordFocus = true"
              @blur="confirmPasswordFocus = false"
            />
            <image 
              class="password-icon" 
              :src="showConfirmPassword ? '/static/login/显示密码.png' : '/static/login/不显示密码.png'"
              @tap="toggleConfirmPasswordVisibility"
            ></image>
          </view>
        </view>

        <!-- 注册按钮 -->
        <button class="register-button" :disabled="isSubmitting" @tap="handleRegister">
          <text v-if="isSubmitting">注册中...</text>
          <text v-else>注册</text>
        </button>

        <!-- 返回登录 -->
        <view class="login-link">
          <text class="login-text">已有账号? </text>
          <text class="login-action" @tap="goToLogin">返回登录</text>
        </view>
      </view>
    </view>

    <!-- 底部版权信息 -->
    <view class="footer">
      <text class="copyright">© {{ currentYear }} 智慧农业环境监测平台 版权所有</text>
    </view>
  </view>
</template>

<script setup lang="ts">
/// <reference types="@dcloudio/types" />
import { ref, reactive, computed } from 'vue';

// 响应式状态
const registerForm = reactive({
  username: '',
  password: '',
  confirmPassword: ''
});

const usernameFocus = ref(false);
const passwordFocus = ref(false);
const confirmPasswordFocus = ref(false);
const showPassword = ref(false);
const showConfirmPassword = ref(false);
const isSubmitting = ref(false);
const currentYear = computed(() => new Date().getFullYear());

// 方法
const togglePasswordVisibility = () => {
  showPassword.value = !showPassword.value;
};

const toggleConfirmPasswordVisibility = () => {
  showConfirmPassword.value = !showConfirmPassword.value;
};

const handleRegister = async () => {
  // 表单验证
  if (!registerForm.username.trim()) {
    uni.showToast({
      title: '请输入用户名',
      icon: 'none'
    });
    return;
  }
  
  if (!registerForm.password) {
    uni.showToast({
      title: '请输入密码',
      icon: 'none'
    });
    return;
  }

  if (!registerForm.confirmPassword) {
    uni.showToast({
      title: '请确认密码',
      icon: 'none'
    });
    return;
  }

  if (registerForm.password !== registerForm.confirmPassword) {
    uni.showToast({
      title: '两次输入的密码不一致',
      icon: 'none'
    });
    return;
  }
  
  try {
    isSubmitting.value = true;
    
    // 调用云函数进行注册
    const { result } = await uniCloud.callFunction({
      name: 'register',
      data: {
        username: registerForm.username.trim(),
        password: registerForm.password
      }
    });
    
    // 处理注册结果
    if (result.code === 200) {
      uni.showToast({
        title: '注册成功',
        icon: 'success'
      });
      
      // 延迟跳转到登录页面
      setTimeout(() => {
        uni.reLaunch({
          url: '/pages/login/login'
        });
      }, 1500);
    } else {
      uni.showToast({
        title: result.msg,
        icon: 'none'
      });
    }
    
  } catch (error) {
    console.error('注册错误:', error);
    uni.showToast({
      title: '注册失败，请稍后重试',
      icon: 'none'
    });
  } finally {
    isSubmitting.value = false;
  }
};

const goToLogin = () => {
  uni.navigateBack();
};
</script>

<style>
/* 全局样式 */
page {
  background-color: #f5f7fa;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.register-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* 顶部背景区域 */
.bg-area {
  position: relative;
  height: 35vh;
  overflow: hidden;
}

.bg-image {
  width: 100%;
  height: 100%;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5));
}

.platform-info {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.logo {
  width: 80px;
  height: 80px;
  border-radius: 20px;
  margin-bottom: 15px;
}

.platform-name {
  color: #ffffff;
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 8px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.platform-slogan {
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* 表单卡片 */
.form-card {
  margin: -20px 20px 20px;
  padding: 25px;
  background-color: #ffffff;
  border-radius: 15px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  position: relative;
  z-index: 10;
}

.form-header {
  margin-bottom: 25px;
}

.form-title {
  font-size: 22px;
  font-weight: bold;
  color: #333333;
  margin-bottom: 8px;
  display: block;
}

.form-subtitle {
  font-size: 14px;
  color: #888888;
  display: block;
}

/* 输入框样式 */
.input-group {
  margin-bottom: 20px;
}

.input-label {
  font-size: 14px;
  color: #333333;
  margin-bottom: 8px;
  display: block;
  font-weight: 500;
}

.input-wrapper {
  display: flex;
  align-items: center;
  height: 50px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 0 15px;
  background-color: #f9f9f9;
  transition: all 0.3s;
}

.input-focus {
  border-color: #4CAF50;
  background-color: #ffffff;
  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.1);
}

.input {
  flex: 1;
  height: 50px;
  font-size: 15px;
  padding-left: 10px;
  background-color: transparent;
}

.icon {
  width: 20px;
  height: 20px;
  margin-right: 8px;
}

.password-icon {
  width: 20px;
  height: 20px;
  padding: 5px;
}

/* 注册按钮 */
.register-button {
  width: 100%;
  height: 50px;
  line-height: 50px;
  background: linear-gradient(135deg, #4CAF50, #2E7D32);
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  border-radius: 8px;
  margin-top: 30px;
  margin-bottom: 20px;
  box-shadow: 0 4px 10px rgba(76, 175, 80, 0.2);
  border: none;
}

.register-button:active {
  transform: translateY(1px);
  box-shadow: 0 2px 6px rgba(76, 175, 80, 0.2);
}

.register-button[disabled] {
  background: linear-gradient(135deg, #a5d6a7, #81c784);
  opacity: 0.8;
}

/* 登录链接 */
.login-link {
  text-align: center;
  margin-top: 15px;
}

.login-text {
  font-size: 14px;
  color: #666666;
}

.login-action {
  font-size: 14px;
  color: #4CAF50;
  font-weight: 500;
}

/* 底部版权信息 */
.footer {
  margin-top: auto;
  padding: 20px 0;
  text-align: center;
}

.copyright {
  font-size: 12px;
  color: #999999;
}
</style>